<template>
	<div class="app-container">
		<!-- Search Form -->
		<el-form :model="queryParams" ref="queryForm" :inline="true" size="mini">
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable />
			</el-form-item>
			<el-form-item label="分类" prop="categoryId">
				<el-cascader v-model="queryParams.categoryId" :options="categoryOptions" :props="{
					checkStrictly: true,
					value: 'id',
					label: 'name',
					emitPath: false
				}" clearable size="mini" placeholder="请选择分类" />
			</el-form-item>
			<el-form-item label="发布人" prop="publisherName">
				<el-input v-model="queryParams.publisherName" placeholder="请输入发布人" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- Table -->
		<el-table v-loading="loading" :data="goodsList">
			<!-- 序号 -->
			<el-table-column label="序号" align="center" type="index" width="50" />
			<el-table-column label="商品图片" align="center" prop="url">
				<template slot-scope="scope">
					<el-image style="width: 40px; height: 30px" :src="scope.row.url" :preview-src-list="[scope.row.url]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="商品名称" align="center" prop="name" />
			<el-table-column label="分类" align="center" prop="categoryName" />
			<el-table-column label="价格(元)" align="center" prop="price" />
			<el-table-column label="库存" align="center" prop="stock" />
			<el-table-column label="发布人" align="center" prop="publisherName" />
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
						{{ scope.row.status === 1 ? '已上架' : '未上架' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
					<el-button size="mini" type="warning" icon="el-icon-edit" v-if="scope.row.status === 1"
						@click="handleChangeStatus(scope.row)">下架</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- Pagination -->
		<div class='page'>
			<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page='queryParams.pageNum'
				:page-sizes='[5, 10, 15]' :page-size='queryParams.pageSize' layout='total, sizes, prev, pager, next'
				:total='total'></el-pagination>
		</div>
		<!-- Detail Dialog -->
		<el-dialog title="商品详情" :visible.sync="dialogVisible" width="700px" :close-on-click-modal="false"
			custom-class="goods-detail-dialog">
			<el-form :model="detailForm" label-width="100px" size="mini">
				<div class="goods-basic-info">
					<div class="goods-image">
						<el-image :src="detailForm.url" :preview-src-list="[detailForm.url]" fit="cover" :z-index="3000" />
					</div>
					<div class="goods-info">
						<el-form-item label="商品">
							<el-input v-model="detailForm.name" readonly />
						</el-form-item>
						<el-form-item label="分类">
							<el-input v-model="detailForm.categoryName" readonly />
						</el-form-item>
						<el-form-item label="价格">
							<el-input v-model="detailForm.price" readonly>
								<template slot="prepend">¥</template>
							</el-input>
						</el-form-item>
						<el-form-item label="库存">
							<el-input v-model="detailForm.stock" readonly>
								<template slot="append">件</template>
							</el-input>
						</el-form-item>
					</div>
				</div>

				<el-divider content-position="left">其他信息</el-divider>

				<div class="goods-extra-info">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="发布人">
								<el-input v-model="detailForm.publisherName" readonly />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="状态">
								<el-tag :type="detailForm.status === 1 ? 'success' : 'info'">
									{{ detailForm.status === 1 ? '已上架' : '未上架' }}
								</el-tag>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<el-divider content-position="left">商品描述</el-divider>

				<el-form-item class="goods-description">
					<div v-html="detailForm.description" class="rich-text-content" />
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { goods_page, goods_offsale, goods_detail } from '@/api/goods'
import { goods_category_list } from '@/api/goodscategory'

export default {
	name: 'Goods',
	data() {
		return {
			loading: false,
			total: 0,
			goodsList: [],
			dialogVisible: false,
			categoryOptions: [], // 需要从后端获取分类列表
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: undefined,
				categoryId: undefined,
				publisherName: undefined
			},
			detailForm: {
				name: undefined,
				categoryName: undefined,
				price: undefined,
				url: undefined,
				publisher: undefined,
				publisherName: undefined,
				stock: undefined,
				description: undefined,
				status: undefined
			}
		}
	},
	created() {
		this.getList()
		// TODO: 获取分类列表
		this.getCategoryList()
	},
	methods: {
		async getList() {
			try {
				this.loading = true
				const response = await goods_page(this.queryParams)
				this.goodsList = response.records
				this.total = Number(response.total)
			} catch (error) {
			} finally {
				this.loading = false
			}
		},
		async getCategoryList() {
			const response = await goods_category_list()
			this.categoryOptions = response
		},
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		resetQuery() {
			this.$refs['queryForm'].resetFields()
			this.handleQuery()
		},
		async handleDetail(row) {
			const response = await goods_detail(row.id)
			this.detailForm = response
			this.dialogVisible = true
		},
		// 每页条数改变
		handleSizeChange(val) {
			this.pageParams.pageSize = val
			this.fetchData()
		},
		// 当前页改变
		handleCurrentChange(val) {
			this.pageParams.pageNum = val
			this.fetchData()
		},
		async handleChangeStatus(row) {
			await this.$confirm('确认要下架该商品吗？', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			const response = await goods_offsale(row.id)
			this.$message.success(response)
			this.getList()
		}
	},
	computed: {
		statusText() {
			return this.detailForm.status === 1 ? '已上架' : '未上架'
		}
	}
}
</script>

<style lang="less" scoped>
.goods-detail-dialog {
	:deep(.el-dialog__body) {
		padding: 20px 30px;
	}
}

.goods-basic-info {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;

	.goods-image {
		width: 200px;
		height: 150px;
		border-radius: 4px;
		overflow: hidden;
		border: 1px solid #ebeef5;

		.el-image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-info {
		flex: 1;

		.el-form-item {
			margin-bottom: 16px;
		}
	}
}

.goods-extra-info {
	margin-bottom: 20px;
}

.rich-text-content {
	min-height: 100px;
	padding: 12px 15px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	background-color: #F5F7FA;
	line-height: 1.6;

	:deep(img) {
		max-width: 100%;
		height: auto;
	}

	:deep(p) {
		margin: 8px 0;
	}

	:deep(table) {
		border-collapse: collapse;
		width: 100%;
		margin: 8px 0;
	}

	:deep(table td),
	:deep(table th) {
		border: 1px solid #ddd;
		padding: 8px;
	}
}

:deep(.el-tag) {
	min-width: 60px;
	text-align: center;
}

:deep(.el-divider__text) {
	font-size: 14px;
	color: #606266;
}
</style>
